<template>
  <div class="wb-process-bar" :style="itemStyle">
    <div class="wb-bar-con" :style="processBorderStyle" @click.stop>
      <img v-if="commonAttr.barUrl" class="mask-bar" :style="maskStyle" :src="commonAttr.barUrl">
      <span class="wb-bar" :style="barStyle">
        <span v-if="commonAttr.isDisplayPercent" class="marker" :style="markerStyle" v-html="percentInfo"></span>
        <img class="maker-bar-point" v-if="commonAttr.barPointUrl" :src="getBarPointUrl(commonAttr.barPointUrl)" :style="markerPointStyle">
      </span>
    </div>
  </div>
</template>

<script>
import { utils } from '@/components/utils/utils'
import { process } from "@/components/js/items/process"
import { wbBase } from '@/components/utils/wbBase'

export default {
  mixins: [utils, process, wbBase],
};
</script>
<style lang="scss">
.wb-process-bar {
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .wb-bar-con{
    flex: auto;
    width: 100%;
    height: 100%;
    border: var(--size-2) solid #fff;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;

    .mask-bar{
      clip-path: inset(0px 0% 0px 0px);
      transition: all 0.5s linear;
      background-size: contain;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    

    .wb-bar{
      position: relative;
      width: 100%;
      height: 100%;
      display: block;
      transition: width 0.5s linear;
      background-size: contain;
      background-repeat: no-repeat;;

      .marker{
        position: absolute;
        right: 0;
        text-align: center;
        display: flex;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
      }
      .maker-bar-point{
        transition: all 0.5s linear;
      }
    }
  }
}
</style>